<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css变量的学习</title>
  <style>
    /* 
     *CSS选择器不能是数字开头，JS中的变量是不能直接数值的，
     *但是，在CSS变量中，这些限制通通没有。 
     *但不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，
     *但是可以是中文，日文或者韩文。
     */

    /* 
      1. 声明：大小写敏感, --variable-name: variable-value;
      2. 使用：使用var(变量名)来使用一个变量
    */

    /* 使用 :root{} 来定义全局css变量 */
    :root {
      --mouse: 100;
      --color: skyblue;
      /* 变量值是字符串 */
      --text: '小笑残虹';
      /* 使用 CSS 变量 使 JavaScript 与 CSS 通信 */
      --foo: if(x > 5) this.width=10;
    }

    /* 当变量的值是数值时，必须使用calc()函数计算 */
    .box1 {
      width: calc(var(--mouse) * 1px);
      height: calc(var(--mouse) * 1px);
      background: var(--color);
    }

    /* 
      3. 变量组合使用
      使用变量的时候，通常不会单独使用，可以组合使用
      当变量的值是字符串时，可以直接拼接，如下
     */
    .box1::after {
      content: 'text值:'var(--text);
    }

    /* 4. 变量未定义和错误定义，则使用默认值 */
    .box2 {
      --color: yellow;
      width: calc(var(--mouse) * 2px);
      height: calc(var(--mouse) * 2px);
      background: var(--c, #cd0000);
      margin-top: 20px;
    }

    p {
      margin: 0;
    }

    /* 继承和作用域 */
    /* 
      1. 作用域
      使用:root{}来定义全局css变量
      想让变量在局部可用，就定义在某个特定的选择器下
      还是下面这段代码

      2. 继承
     */
    .p1 {
      width: 100px;
      height: 100px;
      background: var(--color);
    }

    .p2 {
      width: 100px;
      height: 100px;
      background: var(--c);
    }

    /* 响应式布局 */
    @media screen and (max-width: 800px) {
      :root {
        --mouse: 50;
        --color: pink;
      }
    }

    /* 兼容性处理 
      使用@support命令进行检测。
    */
    a {
      color: #7F583F;
      color: var(--primary);
    }

    @supports ((--a: 0)) {
      /* supported */
    }

    @supports (not (--a: 0)) {
      /* not supported */
    }

    /* 与预处理器(sass,less)比较 */
    /* 
    *1. css变量：
      动态性，可以在运行时更改
      可以方便地从js读写
      可继承，可组合，有作用域

      2. 预处理器：
      预处理器的变量不是动态的，在运行时不可更改
      预处理器的变量没有作用域的说法
      不能与js交互
     */
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2">
    <p class="p1">继承父变量，黄色</p>
    <p class="p2">继承根变量，红色</p>
  </div>
</body>
<script>
  // JavaScript 也可以检测浏览器是否支持 CSS 变量。
  const isSupported =
    window.CSS &&
    window.CSS.supports &&
    window.CSS.supports('--a', 0);

  if (isSupported) {
    /* supported */
  } else {
    /* not supported */
  }

  // JavaScript 操作 CSS 变量的写法如下。
  var root = getComputedStyle(document.documentElement);

  // 读取变量
  var color = root.getPropertyValue('--color').trim();
  console.log(color); // 'skyblue'

  var foo = root.getPropertyValue('--foo');
  console.log(foo)

  // 设置变量
  // document.body.style.setProperty('--primary', '#7F583F');
  document.documentElement.style.setProperty('--color', 'black');
  var color = root.getPropertyValue('--color').trim();
  console.log(color);  // 'black'

  // 删除变量
  // document.body.style.removeProperty('--primary');
  document.documentElement.style.removeProperty('--color');
  var color = root.getPropertyValue('--color').trim();
  console.log(color); // 'skyblue'


  // 这意味着，JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子，事件信息被存入 CSS 变量。
  const docStyle = document.documentElement.style;
  document.addEventListener('mousemove', (e) => {
    // docStyle.setProperty('--mouse', e.clientX);
    docStyle.setProperty('--mouse-x', e.clientX);
    docStyle.setProperty('--mouse-y', e.clientY);
    var x = docStyle.getPropertyValue('--mouse-x').trim();
    var y = docStyle.getPropertyValue('--mouse-y').trim();
    console.log(x,y)
  });


</script>

</html>